<header id="header">

    <div id="pc-menu">
        <a id="menu-bar" class="Card Card-menu"></a>
        <a id="menu-title" href="<%= themeConfig.domain %>">
            <%= themeConfig.siteName%>
        </a>
        <nav id="menu-main" class="menu-main">
            <ul>
                <li id="menu-item" class="menu-item">
                    <div id="tp-weather-widget"></div>
                </li>
                <% menus.forEach(function (menu) { %>
                    <li id="menu-item" class="menu-item">
                        <a href="<%= menu.link %>">
                            <%= menu.name %>
                        </a>
                    </li>
                    <% }); %>
            </ul>
        </nav>
        <form id="gridea-search-form" class="searchform" data-update="<%=site.utils.now%>" action="/search/index.html">
            <i class="Card Card-search"></i>
            <input id="s" class="search-input" autocomplete="off" spellcheck="false" name="q" autofocus="true" placeholder="Search...">
        </form>
    </div>
    <div id="mobile-menu">
        <form id="gridea-search-form" class="mobile-searchform" data-update="<%=site.utils.now%>" action="/search/index.html">
            <i class="Card Card-search"></i>
            <input id="s" class="search-input" autocomplete="off" spellcheck="false" name="q" autofocus="true" placeholder="Search...">
        </form>
        <nav class="menu">
            <ul style="list-style: none;">
                <% menus.forEach(function (menu) { %>
                    <li class="page_item page-item-2">
                        <a href="<%= menu.link %>">
                            <%= menu.name %>
                        </a>
                    </li>
                    <% }); %>
            </ul>
        </nav>
    </div>
    <a id="theme-btn" class="theme-btn" onclick="App.changeTheme()"><i id="themeIcon" class="Card Card-moon"></i></a>
</header>